<template>
  <div class="purchase-root">
    <el-card shadow="never" body-style="padding: 20px 20px 0px 20px;">
      <el-form
        ref="form"
        inline
        :model="form"
        class="form-options"
        label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="出库单号">
              <el-input v-model="form.outNo" disabled/>
            </el-form-item>
            <el-form-item label="出库仓库">
              <el-select
                v-model="form.warehouseId"
                clearable
                filterable
                placeholder="请选择仓库"
                disabled>
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出库说明" class="long-content">
              <el-input
                type="textarea"
                :rows="2"
                disabled
                v-model="form.outExplain">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目标位置">
              <el-select
                v-model="form.targetLocation"
                clearable
                filterable
                placeholder="请选择目标位置"
                disabled>
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出库完成时间">
              <el-input
                v-model="form.outTime"
                disabled/>
            </el-form-item>

            <el-form-item label="最近操作人">
              <el-input v-model="form.operName" disabled/>
            </el-form-item>
            <el-form-item label="最近操作时间">
              <el-input
                v-model="form.operTime"
                disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div>
      <EquipmentReturn
        v-for="(item, index) in form.busOutDetailsList"
        ref="EquipmentReturn"
        :form="item"
        :warehouseId="selectWarehouseId"
        :equipment-data-extra="item.baseEquipmentDetails"
        @onHandleException="onHandleException(index)"
        :treeData="equipmentTreeData"
        :key="index"/>
    </div>
  </div>
</template>

<script>
import EquipmentReturn from '../EquipmentReturn'
import {
  getBaseEquipmentType, getWarehouse, getWarehouseReturns, returnAdd
} from '@/api/warehouse'

export default {
  name: 'WarehouseReturnComponent',
  components: {
    EquipmentReturn
  },
  props: {
    id: {}
  },
  data() {
    return {
      purchaserLoading: false,
      purchaserOptions: [],
      equipments: [{}, {}, {}, {}],
      equipmentTreeData: [],
      selectWarehouseId: '',
      warehouseOptions: [],
      form: {
        id: '',
        operName: '',
        outExplain: '',
        status: '',
        warehouseId: '',
        outTime: '',
        operId: '',
        operTime: '',
        outNo: '',
        targetLocation: '',
        busOutDetailsList: []
      }
    }
  },
  mounted() {
    getBaseEquipmentType({}).then(res => {
      this.equipmentTreeData = res.resultData
    })
    getWarehouse({}).then(res => {
      this.warehouseOptions = res.resultData
    })
    this.getWarehouseReturns()
  },
  methods: {
    onHandleException() {
      this.getWarehouseReturns()
    },
    saveAndSubmit() {
      returnAdd(this.form).then(res => {
        this.$emit('onSubmitReturn')
      })
    },
    getWarehouseReturns() {
      getWarehouseReturns({ id: this.id }).then(res => {
        this.form = res.resultData[0]
        let showSubmit = true
        this.form.busOutDetailsList.forEach(item => {
          if (item.isException) {
            showSubmit = false
          }
        })
        this.$emit('onShowSubmit', showSubmit)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.purchase-root {
  max-height: 680px;
  overflow-y: auto;

  ::v-deep .el-form-item__content {
    width: 185px !important;

    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 100%;
    }
  }

  ::v-deep .long-content {
    .el-form-item__content {
      width: 480px !important;

      .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
      }

      .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
      }

      .el-cascader--small {
        width: 100%;
      }
    }
  }
}
</style>
